<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<div style="width: 100%;"><p style="text-align: center;">{{data.a}}</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<div style="width: 50%;margin-left: 25%;">
			<el-card >
				<div style="width: 100%;">
					<el-main>
						<h2 style="text-align: center;">{{data.a}}</h2>
						<div style="margin-left: 30%;">
						
						<el-form :model="data.remark" :rules="rules" ref="formRef">
							<el-form-item label="被评论人:">
								 <el-input v-model="data.user.uname" placeholder="被评论人" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item label="评论商品:">
								 <el-input v-model="data.com.comname" placeholder="评论商品" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item label="评价:">
								
								<el-rate v-model="data.remark.rate" clearable  :texts="data.rat" show-text="" style="width: 16rem;margin-left: 2rem;"/>
							</el-form-item>
							
							<el-form-item label="评论内容:">
								<el-input
								    v-model="data.remark.content"
								    style="width: 66%"
								    :rows="6"
								    type="textarea"
								    placeholder="评论内容"
									:prefix-icon="UserFilled"
								  />
							</el-form-item>
						</el-form>
						
						<el-button  @click="add()" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">确认回复</el-button>
						</div>
					</el-main>
				</div>
				</el-card>
		</div>
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,DeleteFilled} from '@element-plus/icons-vue'
		import bottom from "../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../store/alert.js'
		const route=useRoute()
		const data=reactive({
			user:{},
			com:{},
			remark:{content:"",rate:undefined},
			rat:['差劲', '一般', '良好', '优秀', '完美'],
			a:"回复商品评论"
		})
		function add(){
			if(data.remark.content==""||data.remark.rate==undefined){
				errors("评论信息不允许为空")
				return
			}
			let fd=new FormData()
			fd.append("cus.uid",data.user.uid)
			fd.append("commodity.comid",data.com.comid)
			fd.append("content",data.remark.content)
			fd.append("rate",data.remark.rate)
			$postf("/user/add",fd).then((read)=>{
				success(read.data.msg)
				
			})
		}
		onMounted(()=>{
			let uid=route.query.uid
			let comid=route.query.comid
			let c=route.query.c
			if(c!=undefined){
				
				$get("/user/findByComid/"+c).then((read)=>{
					data.user=read.data.data.user
					data.com=read.data.data.com				
					data.a="评论"+data.com.comname
				})
			}else{
				$get("/user/findByUidComid/"+uid+"/"+comid).then((read)=>{
					data.user=read.data.data.user
					data.com=read.data.data.com				
					
				})
			}
			
		})
		
</script>

<style>
</style>
